@import "./mixin";
@import"./cssreset";

// 轮播图

.swiper-container {
    // background-color: chartreuse;
    width: 100%;
    margin: 0 auto;
    position: relative;
    height: 400px;
}

// 图片、轮播图组合

#pic_slide {
    // background-color: darkgreen;
    width: 1200px;
    height: 430px;
    margin: 0 auto;
    margin-top: 10px;

    .pic_slide_left {
        // background-color: floralwhite;
        width: 630px;
        height: 430px;
        margin: 0 auto;
        float: left;
        overflow: hidden;
        #hd {
            width: 630px;
            height: 70px;
            // float: left; overflow:hidden;
            position: relative;
            z-index: 1;

            li {
                width: 125px;
                margin-left: 1px;
                height: 69px;
                float: left;
                text-align: center;
                background: #fff;
                cursor: pointer;

                .triangle {
                    position: absolute;
                    width: 0;
                    height: 0;
                    margin: 0 auto;
                    margin-left: -10px;
                    border-left: 9px solid transparent;
                    border-right: 9px solid transparent;
                    // display: none;
                    // border-top: 10px solid red;
                }

                .a_text {
                    display: block;
                    margin-top: 20px;
                }
            }

            // .f{
            //     margin-left: 0px;
            //     width:126px;
            // }
            .a {
                color: #ee4f38;
                border-top: 1px #ee4f38 solid;
            }

            .on {
                .sj1 {
                    display: inline;
                    border-top: 10px solid #ee4f38;
                }
            }

            .b {
                color: #8973d7;
                border-top: 1px solid #8973d7
            }

            .on {
                .sj2 {
                    display: inline;
                    border-top: 10px solid #8973d7;
                    ;
                }
            }

            .c {
                color: #ffab4a;
                border-top: 1px solid #ffab4a;
            }

            .on {
                .sj3 {
                    display: inline;
                    border-top: 10px solid #ffab4a;
                }
            }

            .d {
                color: #3a95eb;
                border-top: 1px solid #3a95eb;
            }

            .on {
                .sj4 {
                    display: inline;
                    border-top: 10px solid #3a95eb;
                }
            }

            .e {
                color: #ef7303;
                border-top: 1px solid #ef7303;
            }

            .on {
                .sj5 {
                    display: inline;
                    border-top: 10px solid #ef7303;
                }
            }
        }

        #bd {
            width: 630px;
            height: 360px;
            margin-top: 10px;
            // background-color: red;
            position: relative;
            .bd_ul {
                width:4410px;
                position: absolute;
                .wrapper_img{
                    float: left;
                    width:630px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }


    // 中间图片
    .pic_slide_center {
        // background-color: gold;
        width: 300px;
        height: 430px;
        float: left;
        margin-left: 10px;

        // margin:0 auto;
        .pic_slide_center_top {
            width: 300px;
            height: 210px;
            float: left;
        }

        .pic_slide_center_bottom {
            width: 300px;
            height: 210px;
            float: left;
            margin-top: 10px;
        }
    }

    // 右侧图片
    .pic_slide_right {
        background-color: hotpink;
        width: 250px;
        height: 430px;
        float: right;
        margin: 0 auto;

        .pic_slide_right_top {
            height: 36px;
            width: 100%;
            line-height: 36px;
            background-color: #ff6666;
            float: left;
            color: #FFF;
            text-align: center;
            font-size: 17px;
        }

        .pic_slide_right_bottom {
            width: 248px;
            height: 393px;
            float: left;
            border: 1px #dfdfdf solid;
            border-top: 0px;

            ul {
                margin-top: 10px;

                li {
                    a {
                        background-image: url(https://www.7hua.com/Tpl/2016skin/Public/images/index_tel_ico.jpg);
                        background-repeat: no-repeat;
                        background-position: 12px 8px;
                        font-family: Arial;
                        letter-spacing: 1px;
                        font-size: 20px;
                        padding-left: 60px;
                        color: #c81623;
                        line-height: 45px;
                        height: 45px;
                        display: block;
                    }

                    .a2 {
                        background-image: url(https://www.7hua.com/Tpl/2016skin/Public/images/index_tel_ico.jpg);
                        background-repeat: no-repeat;
                        background-position: 12px -40px;
                        font-family: Arial;
                        letter-spacing: 1px;
                    }

                    .a3 {
                        background-image: url(https://www.7hua.com/Tpl/2016skin/Public/images/index_tel_ico.jpg);
                        background-repeat: no-repeat;
                        background-position: 12px -90px;
                        font-family: Arial;
                        letter-spacing: 1px;
                    }
                }
            }

            .erweima {
                text-align: center;
                margin-top: 20px;

            }
        }
    }
}
.fly1{
    width:100px;
    height:100px;
    position: fixed;
    top: 250px;
    width: 90px;
    height: 0px;
    z-index: 100;
    right:25px;
    cursor: pointer;
}
.fly2{
    width: 224px;
    height:50px;
    background-color: rgb(255, 102, 102);
    box-shadow: rgb(0 0 0 / 16%) 0px 5px 14px;
    position: fixed;
    bottom: -6px;
    right:50px;
    z-index: 1000;
    border-radius: 10px;
    .fly2_img{
        width: 40px;
        height:34px;
        background: url(https://static.meiqia.com/widget/static/icon-mq-round@2x.png) no-repeat 5px 8px / 64px;
        float: left;
        cursor: pointer;
    }
    .fly2_text{
        width:180px;
        height:48px;
        line-height: 48px;
        float: left;
        font-size: 16px;
        color: rgb(255, 255, 255);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: calc(100% - 41px);
        text-align: center;
        border-left: 1px solid rgba(0, 0, 0, 0.08);
        cursor: pointer;
    }
}